<template>
	<view :class="{fog : infoEditOpen || liuyanEditOpen}"></view>
	<!-- <view class="fog"></view> -->
	<view class="container">
		<view class="title" :style="{ marginTop: safeTop + 'px'}"></view>
		<view class="info" @tap="infoEditOpenFun">
			<image :src="baseurl + '/toy/touxiang.png'"></image>
			<text>Hugo zheng</text>
		</view>
		<view class="tongzhi">
			<view class="tongzhi-item" @tap="jumpTongZhi">
				<text>提醒通知</text>
				<view class="to-num" v-if="tixingnum > 0">{{tixingnum}}</view>
				<image :src="baseurl + '/mine/ic_back.png'"></image>
			</view>
			<view class="tongzhi-item">
				<text>合作联系</text>
				<view class="to-num" v-if="hezuonum > 0">{{hezuonum}}</view>
				<image :src="baseurl + '/mine/ic_back.png'"></image>
			</view>
		</view>
		<view class="tongji">
			<view class="tj-top">
				<text class="tj-top-left">统计</text>
				<view class="tj-top-right" @tap="openSelectDatebar">
					<text>{{selectDate}}</text>
					<image :src="selectIcon"></image>
				</view>
				<view class="select-display" v-if="openSelectDate">
					<text @tap="selectDatebar(0)">年度</text>
					<text @tap="selectDatebar(1)">季度</text>
					<text @tap="selectDatebar(2)">月度</text>
				</view>
			</view>
			<view class="tj-bottom">
				<view class="charts-box">
					<qiun-data-charts 
					      type="pie"
					      :opts="opt"
					      :chartData="chartData"
						  :canvas2d="true"
						  canvasId="cSKVHZgpDwGzvemFxiEYeKufUfjOztgE"
					    />
				</view>
			</view>
		</view>
		<view class="mine-bottom">
			<view class="item" @tap="liuyanopen">
				<text>留言反馈</text>
				<image :src="baseurl + '/mine/ic_back.png'"></image>
			</view>
			<view class="item">
				<text>用户协议</text>
				<image :src="baseurl + '/mine/ic_back.png'"></image>
			</view>
			<view class="item">
				<text>隐私政策</text>
				<image :src="baseurl + '/mine/ic_back.png'"></image>
			</view>
		</view>

	</view>
	<!-- 个人信息编辑 -->
	<view class="info-edit" v-if="infoEditOpen">
		<view class="info-edit-top">
			<text class="title">个人信息</text>
			<image @tap="close" :src="baseurl + '/mine/close.png'"></image>
		</view>
		<view class="info-edit-touxiang">
			<text class="title">头像</text>
			<image :src="baseurl + 'toy/touxiang.png'"></image>
		</view>
		<view class="info-edit-nickname">
			<text class="title">昵称</text>
			<input placeholder="输入你的昵称" />
			<text class="num">0/30</text>
		</view>
		<view class="info-edit-button">
			<view class="play-button">
				确认
			</view>
		</view>
	</view>
	<!-- 留言反馈 -->
	<view class="liuyan-edit" v-if="liuyanEditOpen">
		<view class="liuyan-edit-top">
			<text class="title">留言反馈</text>
			<image @tap="close" :src="baseurl + '/mine/close.png'"></image>
		</view>
		<textarea placeholder="反馈描述"><text>0/500</text></textarea>
		<view class="info-edit-button">
			<view class="play-button">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {baseUrl} from '@/setting/const.js';
	
	import {
		reactive,
		ref
	} from 'vue';
	const baseurl = ref(baseUrl)
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	// 跳转到通知
	const jumpTongZhi = () => {
		uni.navigateTo({
			url: '/pages/tongzhi/tongzhi'
		})
	}
	

	// 留言反馈
	const liuyanEditOpen = ref(false)
	const liuyanopen = () => {
		uni.hideTabBar()
		liuyanEditOpen.value = true
	}

	// 个人信息编辑
	const infoEditOpen = ref(false)
	const infoEditOpenFun = () => {
		uni.hideTabBar()
		infoEditOpen.value = true
	}
	const close = () => {
		infoEditOpen.value = false
		liuyanEditOpen.value = false
		uni.showTabBar()
	}

	const selectIcons = ref([
		baseurl.value + "/mine/sanjiao.png",
		baseurl.value +  "/mine/sanjiao_down.png"
	])
	const selectIcon = ref(baseurl.value + "/mine/sanjiao.png")
	const openSelectDate = ref(false)
	const openSelectDatebar = () => {
		openSelectDate.value = !openSelectDate.value
		selectIcon.value = selectIcons.value[1]
	}
	const date = ref([{
			id: 0,
			name: '年度'
		},
		{
			id: 1,
			name: '季度'
		},
		{
			id: 2,
			name: '月度'
		}
	])
	const selectDate = ref('年度')
	const selectDatebar = (id) => {
		selectDate.value = date.value[id].name
		openSelectDate.value = false
		selectIcon.value = selectIcons.value[1]
	}
	// 获取安全区域
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()
	const safeTop = safeAreaInsets.top + 5
	const tixingnum = ref(1)
	const hezuonum = ref(0)
	
	// const myCharts = ref({})
	onLoad(() => {
		getServerData();
	})
	const opt = ref({
        timing: "easeOut",
        duration: 500,
        rotate: false,
        rotateLock: false,
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [5,5,5,5],
        fontSize: 13,
        fontColor: "#666666",
        dataLabel: true,
        dataPointShape: true,
        dataPointShapeType: "solid",
        touchMoveLimit: 60,
        enableScroll: false,
        enableMarkLine: false,
        legend: {
          show: true,
          position: "bottom",
          float: "center",
          padding: 5,
          margin: 5,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 0,
          fontSize: 13,
          fontColor: "#666666",
          lineHeight: 11,
          hiddenColor: "#CECECE",
          itemGap: 10
        },
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 0,
            borderColor: "#FFFFFF",
            customRadius: 0,
            linearType: "none"
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: "#000000",
            borderOpacity: 0.7,
            bgColor: "#000000",
            bgOpacity: 0.7,
            gridType: "solid",
            dashLength: 4,
            gridColor: "#CCCCCC",
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: "#FFFFFF",
            legendShow: true,
            legendShape: "diamond",
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: "#FFFFFF",
            labelBgOpacity: 0.7,
            labelFontColor: "#666666"
          }
        }
      })
	//  饼图数据
	const chartData = ref({})
	const getServerData = ()=>{
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            series: [
              {
                data: [
					{"name":"预定金额","value":10},
					{"name":"待补款金额","value":25},
					{"name":"已补款金额","value":65},
					]
              }
            ]
          };
        chartData.value = JSON.parse(JSON.stringify(res));
      }, 100);
    }
	
</script>

<style lang="scss">
	.fog {
		background-color: RGBA(122, 122, 124, 0.5) !important;
		z-index: 2;
		width: 750rpx;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}

	@font-face {
		font-family: zihunbiantaoti;
		src: url('https://gitee.com/yxk756/mogu/raw/main/static/fonts/zihunbiantaoti.ttf');
	}

	.liuyan-edit {
		z-index: 3;
		box-sizing: border-box;
		position: fixed;
		width: 750rpx;
		// height: 768rpx;
		bottom: 0rpx;
		padding-left: 30rpx;
		background: #FFFFFF;

		textarea {
			box-sizing: border-box;
			margin-top: 30rpx;
			padding-left: 20rpx;
			padding-top: 21rpx;
			width: 690rpx;
			height: 440rpx;
			background: #F4F5F8;
			border-radius: 10rpx;

			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #979A9E;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;

			text {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #979A9E;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.liuyan-edit-top {
			display: flex;
			// background-color: rebeccapurple;
			align-items: center;
			justify-content: space-between;
			padding-right: 47rpx;
			margin-top: 40rpx;

			.title {
				width: 144rpx;
				height: 50rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #222222;
				line-height: 50rpx;
				// text-align: left;
				font-style: normal;
				background: #FFFFFF;
				// background-color: red;
			}

			image {
				width: 26rpx;
				height: 26rpx;
			}
		}
	}

	.info-edit {
		z-index: 3;
		box-sizing: border-box;
		position: fixed;
		width: 750rpx;
		// height: 768rpx;
		bottom: 0rpx;
		padding-left: 30rpx;
		background: #FFFFFF;

		.info-edit-nickname {
			display: flex;
			flex-direction: column;
			margin-top: 40rpx;
			position: relative;

			.title {
				width: 64rpx;
				height: 45rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				line-height: 45rpx;
				text-align: left;
				font-style: normal;
				background: #FFFFFF;
			}

			input {
				margin-top: 20rpx;
				width: 690rpx;
				height: 100rpx;
				background: #F4F5F8;
				border-radius: 10rpx;

				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #979A9E;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				padding-left: 21rpx;

			}

			.num {
				position: absolute;
				width: 65rpx;
				height: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #979A9E;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				right: 40rpx;
				bottom: 30rpx;
			}
		}

		.info-edit-touxiang {
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;

			text {
				width: 64rpx;
				height: 45rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				line-height: 45rpx;
				text-align: left;
				font-style: normal;
				background: #FFFFFF;
			}

			image {
				margin-top: 20rpx;
				width: 130rpx;
				height: 130rpx;
				background: #FFFFFF;
				border-radius: 65rpx;
				// border: 1rpx solid #979797;
			}
		}

		.info-edit-top {
			display: flex;
			// background-color: rebeccapurple;
			align-items: center;
			justify-content: space-between;
			padding-right: 47rpx;
			margin-top: 40rpx;

			.title {
				width: 144rpx;
				height: 50rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #222222;
				line-height: 50rpx;
				// text-align: left;
				font-style: normal;
				background: #FFFFFF;
			}

			image {
				width: 26rpx;
				height: 26rpx;
			}
		}

	}

	.play-button {
		width: 690rpx;
		height: 90rpx;
		background: #FFDD1A;
		border-radius: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// margin: 0 auto;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		line-height: 45rpx;
		text-align: center;
		font-style: normal;
		margin-top: 60rpx;
		margin-bottom: 88rpx;
	}

	.mine-bottom {
		padding-bottom: 242rpx;

		.item {
			display: flex;
			box-sizing: border-box;
			width: 690rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			align-items: center;
			justify-content: space-between;
			padding-left: 30rpx;
			padding-right: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			text {

				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}



	.container {
		box-sizing: border-box;
		background-color: #F4F5F8;
		// background-color: rebeccapurple;

	}

	.tongji {
		box-sizing: border-box;
		width: 690rpx;
		height: 690rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-top: 18rpx;
		position: relative;
		// background-color: red;
		.tj-bottom {
			// height: 605rpx;
			height: 580rpx;
			// background-color: rebeccapurple;
			.charts-box{
				height: 100%;
			}
			margin-bottom: 46rpx;
		}

		.select-display {
			z-index: 2;
			width: 160rpx;
			height: 219rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 7rpx 30rpx 0rpx rgba(135, 131, 153, 0.16);
			border-radius: 10rpx;
			position: absolute;
			top: 100rpx;
			right: 30rpx;
			// z-index: 0;
			display: flex;
			flex-direction: column;

			text {
				width: 160rpx;
				height: 219rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #979A9E;
				line-height: 33rpx;
				text-align: center;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1rpx solid #EEEEEE;
				;
			}
		}

		.tj-top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tj-top-left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
				margin-top: 32rpx;
				margin-left: 30rpx;
			}

			.tj-top-right {
				margin-top: 32rpx;
				margin-right: 30rpx;
				width: 124rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				border: 1rpx solid #D4D8DE;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					width: 48rpx;
					height: 33rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
					color: #222222;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
				}

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 6rpx;


					// background: #D8D8D8;
					// border: 1rpx solid #979797;
				}
			}
		}
	}

	.tongzhi {
		margin-top: 30rpx;
		display: flex;
		box-sizing: border-box;
		width: 750rpx;
		height: 100rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;

		// background-color: red;
		.tongzhi-item {
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 10rpx;
			width: 335rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 30rpx;
			padding-right: 20rpx;

			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
			display: flex;

			.to-num {
				width: 40rpx;
				height: 40rpx;
				background: rgba(255, 56, 56, 1);
				border-radius: 20rpx;
				margin-left: 93rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
				
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	page{
		background-color: #F4F5F8;
	}
	.title {
		box-sizing: border-box;
		// width: 750rpx;
		background-color: #F4F5F8;
		height: 61rpx;
	}

	.info {
		display: flex;
		flex-direction: column;
		width: 750rpx;
		// background-color: fuchsia;
		padding-top: 30rpx;
		align-items: center;
		justify-content: center;

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 65rpx;

		}

		text {
			width: 182rpx;
			height: 45rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
			line-height: 45rpx;
			text-align: left;
			font-style: normal;
			margin-top: 18rpx;
		}
	}
</style>